<template>
	<view>
		<cu-custom :isBack="false" bgColor="bg-white solids-bottom text-darkGray">
			<block slot="content">
				购物车
			</block>
			<block slot="right"></block>
		</cu-custom>
		<view style="position: fixed;height: 120upx;width: 100%;z-index: 100;" :style="[{top:CustomBar+'px'}]">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-red2 cur':''" v-for="(item,index) in tablist" :key="index" @tap="tabSelect" :data-id="index">
						{{item}}
					</view>
				</view>
			</scroll-view>
			<view class="warp30"></view>
		</view>
		<view class="warp120"></view>
			<!-- 商品列表 -->
		<view class="goods-list">
			<view class="empty" v-if="goodsLen==0">
				<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
				<view class="empty-tips">
					空空如也
					<navigator class="navigator" url="/" open-type="switchTab">随便逛逛></navigator>
				</view>
			</view>
			<view class="row-g" v-for="(rowg,indexg) in goodsList" :key="rowg.id" v-if="rowg.arry.length>0">
				<view class="cu-list menu solids-bottom">
					<view class="cu-item arrow" style="padding-left: 20upx;">
						<view class="content">
							<view class="checkbox-box margin-right-sm" @tap="allSelectG(indexg)" style="display: inline-block;">
								<view :class="[isAllselectedG[indexg]?'cuIcon-roundcheckfill text-red':'cuIcon-round text-gray']"></view>
							</view>
							<view class="cu-avatar sm round margin-right-sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);vertical-align: top;"></view>
							<text>张思思</text>
						</view>
					</view>
				</view>
				<view class="row" v-for="(row,index) in rowg.arry" :key="row.id" >
					<!-- 删除按钮 -->
					<view class="menu" @tap.stop="deleteGoods(row.id,indexg)">
						<view class="icon shanchu"></view>
					</view>
					<!-- 商品 -->
					<view class="carrier" :class="[theIndex==row.id?'open':oldIndex==row.id?'close':'']" @touchstart="touchStart(row.id,$event)" @touchmove="touchMove(row.id,$event)" @touchend="touchEnd(row.id,$event)">
						<!-- checkbox -->
						<view class="checkbox-box" @tap="selected(index,indexg)">
							<view :class="[row.selected?'cuIcon-roundcheckfill text-red':'cuIcon-round text-gray']"></view>
						</view>
						<!-- 商品信息 -->
						<view class="goods-info" @tap="toGoods(row)">
							<view class="img">
								<image :src="row.img"></image>
							</view>
							<view class="info" v-if="TabCur==0||TabCur==1">
								<view class="title">{{row.name}}</view>
								<view class="spec-text">3房2厅 | 100㎡ | 东南向</view>
								<view class="price-number">
									<view class="price">550万</view>
								</view>
							</view>
							<view class="info" v-if="TabCur==2||TabCur==3">
								<view class="title">{{row.name}}</view>
								<view class="spec">家电清洗</view>
								<view class="price-number">
									<view class="price">100元/小时</view>
									<view class="number">
										<view class="sub" @tap.stop="sub(index,indexg)">
											<view class="icon jian"></view>
										</view>
										<view class="input" @tap.stop="discard">
											<input type="number" v-model="row.number" @input="sum" />
										</view>
										<view class="add"  @tap.stop="add(index,indexg)">
											<view class="icon jia"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="cu-tabbar-height"></view>
		<!-- 脚部菜单 -->
		<view class="footer" :style="{bottom:footerbottom}">
			<view class="checkbox-box" @tap="allSelect">
				<view :class="[isAllselected?'cuIcon-roundcheckfill text-red':'cuIcon-round text-gray']"></view>
				<view class="text">全选</view>
			</view>
			<view class="delBtn" @tap="deleteList" v-if="isAll>0">删除</view>
			<view class="settlement">
				<view class="sum">合计:<view class="money">￥{{sumPrice}}</view></view>
				<view class="btn">结算({{isAll}})</view>
			</view>
		</view>
	
	</view>
</template>

<script>

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur:0,
				tablist:["房源","装修","服务","好物"],
				sumPrice:'0.00',
				headerPosition:"fixed",
				headerTop:null,
				statusTop:null,
				selectedList:[],
				isAllselected:false,
				isAllselectedG:[],
				isAll:0,
				goodsList:[
					{
						id:1,
						arry:[
							{id:1,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:2,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:3,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:4,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:5,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false}
						],
					},
					{
						id:2,
						arry:[
							{id:6,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:7,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:8,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:9,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:10,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false}
						],
					},
				],
				//控制滑动效果
				theIndex:null,
				oldIndex:null,
				isStop:false,
				goodsLen:0,
			}
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
			this.headerTop = e.scrollTop>=0?null:0;
			this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		onLoad() {
			for(let i=0;i<this.goodsList.length;i++){
				this.isAllselectedG.push(false);
				this.selectedList.push([]);
				this.goodsLen+=this.goodsList[i].arry.length;
			}
			console.info(this.goodsLen);
			//兼容H5下结算条位置
			// #ifdef H5
				this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight+'px';
			// #endif
			// #ifdef APP-PLUS
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
		},
		computed:{
		},
		methods: {
			//控制左滑删除效果-begin
			touchStart(index,event){
				//多点触控不触发
				if(event.touches.length>1){
					this.isStop = true;
					return ;
				}
				this.oldIndex = this.theIndex;
				this.theIndex = null;
				//初始坐标
				this.initXY = [event.touches[0].pageX,event.touches[0].pageY];
			},
			touchMove(index,event){
				//多点触控不触发
				if(event.touches.length>1){
					this.isStop = true;
					return ;
				}
				let moveX = event.touches[0].pageX - this.initXY[0];
				let moveY = event.touches[0].pageY - this.initXY[1];
				
				if(this.isStop||Math.abs(moveX)<5){
					return ;
				}
				if (Math.abs(moveY) > Math.abs(moveX)){
					// 竖向滑动-不触发左滑效果
					this.isStop = true;
					return;
				}
				
				if(moveX<0){
					this.theIndex = index;
					this.isStop = true;
				}else if(moveX>0){
					if(this.theIndex!=null&&this.oldIndex==this.theIndex){
						this.oldIndex = index;
						this.theIndex = null;
						this.isStop = true;
						setTimeout(()=>{
							this.oldIndex = null;
						},150)
					}
				}
			},
			touchEnd(index,$event){
				//结束禁止触发效果
				this.isStop = false;
			},
			//控制左滑删除效果-end
			
			
			//商品跳转
			toGoods(e){
				uni.showToast({title: '商品'+e.id,icon:"none"});
				/* uni.navigateTo({
					url: '../goods/goods' 
				}); */
			},
			//跳转确认订单页面
			toConfirmation(){
				let tmpList=[];
				for(let i=0;i<this.goodsList.length;i++){
					for(let j=0;j<this.goodsList[i].arry.length;j++){
						if(this.goodsList[i].arry[j].selected) {
							tmpList.push(this.goodsList[i].arry[j]);
						}
					}
				}
				if(tmpList.length<1){
					uni.showToast({
						title:'请选择商品结算',
						icon:'none'
					});
					return ;
				}
				/* uni.setStorage({
					key:'buylist',
					data:tmpList,
					success: () => {
						uni.navigateTo({
							url:'../order/confirmation'
						})
					}
				}) */
			},
			//删除商品
			deleteGoods(id,isall){
				let len = this.goodsList.length;
				for(let i=0;i<len;i++){
					for(let j=0;j<this.goodsList[i].arry.length;j++){
						if(id==this.goodsList[i].arry[j].id){
							this.goodsList[i].arry.splice(j, 1);
							break;
						}
					}
				}
				for(let i=0;i<this.selectedList.length;i++){
					for(let j=0;j<this.selectedList[i].length;j++){
						if(id==this.selectedList[i][j]){
							this.selectedList[i].splice(j, 1);
							break;
						}
					}
				}
				console.info(this.goodsList,this.selectedList);
				for(let i=0;i<this.isAllselectedG.length;i++){
					this.isAllselectedG[i] = this.selectedList[i].length == this.goodsList[i].arry.length;
				}
				if(!isall){
					this.sum();
				}
				this.oldIndex = null;
				this.theIndex = null;
			},
			// 删除商品s
			deleteList(){
				let len = this.selectedList.length;
				for(let i=0;i<len;i++){
					let lenj = this.selectedList[i].length
					for(let j=0;j<lenj;j++){
						this.deleteGoods(this.selectedList[i][0],true);
					}
				}
				this.sum();
			},
			// 选中商品
			selected(index,indexg){
				var sumarry = 0;
				for(let i=0;i<this.goodsList.length;i++){
					sumarry+=this.goodsList[i].arry.length;
				}
				this.goodsList[indexg].arry[index].selected = this.goodsList[indexg].arry[index].selected?false:true;
				
				let i = this.selectedList[indexg].indexOf(this.goodsList[indexg].arry[index].id);
				i>-1?this.selectedList[indexg].splice(i, 1):this.selectedList[indexg].push(this.goodsList[indexg].arry[index].id);
				this.isAllselectedG[indexg] = this.selectedList[indexg].length == this.goodsList[indexg].arry.length;
				
				this.sum();
			},
			//全选
			allSelect(){
				let len = this.selectedList.length;
				console.info(this.isAllselected);
				for(let i=0;i<len;i++){
					this.allSelectG(i,this.isAllselected);
				}
				this.sum();
			},
			allSelectG(i,bool){
				let len = this.goodsList.length;
				let arr = [];
				var sumarry=this.goodsList[i].arry.length;				
				for(let j=0;j<this.goodsList[i].arry.length;j++){
					if(bool!=undefined){
						this.isAllselectedG[i] = bool;
					}
					this.goodsList[i].arry[j].selected = this.isAllselectedG[i]? false : true;
					arr.push(this.goodsList[i].arry[j].id);
				}
				this.selectedList[i] = this.isAllselectedG[i]?[]:arr;
				this.isAllselectedG[i] = this.isAllselectedG[i]||sumarry==0?false : true;
				if(bool==undefined){
					this.sum();
				}
			},
			// 减少数量
			sub(index,indexg){
				if(this.goodsList[indexg].arry[index].number<=1){
					return;
				}
				this.goodsList[indexg].arry[index].number--;
				this.sum();
			},
			// 增加数量
			add(index,indexg){
				this.goodsList[indexg].arry[index].number++;
				this.sum();
			},
			// 合计
			sum(){
				let isAllB = true;
				for(let i=0;i<this.isAllselectedG.length;i++){
					isAllB = isAllB&&this.isAllselectedG[i];
				}
				this.isAllselected = isAllB;
				this.selectedListAll();
				this.sumPrice=0;
				let len = this.goodsList.length;
				for(let i=0;i<len;i++){
					for(let j=0;j<this.goodsList[i].arry.length;j++){
						if(this.goodsList[i].arry[j].selected) {
							this.sumPrice = this.sumPrice + (this.goodsList[i].arry[j].number*this.goodsList[i].arry[j].price);
						}
					}
				}
				this.sumPrice = this.sumPrice.toFixed(2);
			},
			discard() {
				//丢弃
			},
			selectedListAll(){
				let len = 0;
				this.goodsLen = 0;
				for(let i=0;i<this.selectedList.length;i++){
					len+=this.selectedList[i].length;
				}
				this.isAll=len;
				for(let i=0;i<this.goodsList.length;i++){
					this.goodsLen+=this.goodsList[i].arry.length;
				}
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.isAllselectedG=[];
				this.selectedList=[];
				this.goodsLen=0;
				let goodsList0 = [
					{
						id:1,
						arry:[
							{id:1,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:2,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
						],
					},
					{
						id:2,
						arry:[
							{id:6,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:7,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
						],
					},
				]
				let goodsList1 = [
					{
						id:1,
						arry:[
							{id:1,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:2,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:3,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:4,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:5,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false}
						],
					},
					{
						id:2,
						arry:[
							{id:6,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:7,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:8,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:9,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
							{id:10,img:'/static/top.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false}
						],
					},
				]
				if(this.TabCur>1){
					this.goodsList = goodsList0;
				}else{
					this.goodsList = goodsList1;
				}
				for(let i=0;i<this.goodsList.length;i++){
					this.isAllselectedG.push(false);
					this.selectedList.push([]);
					this.goodsLen+=this.goodsList[i].arry.length;
					for(let j=0;j<this.goodsList[i].arry.length;j++){
						this.goodsList[i].arry[j].selected = false;
					}
				}
				this.sum();
			}
		}
	}
</script>
<style lang='scss'>
	page{position: relative;}
	@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOEAAsAAAAAB7wAAAM1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDAIJNATYCJAMQCwoABCAFhG0HPhu1BsiOw7jha84s8T+CgOyq6unevTlAeAkRhAhQBjj8eJfmMg/oB5whSgaFspy7AqbpwE3Py3/j9j+X07uGyFHr21lua9HYi9rUCzDeGtBYmw4o0AJJ0BvGLmiJxyEAC3yIQhSVPL9BF4U5TgBi7ChtQzfjQKFYWEdgrFiqEBsxoGurtMfAhuD74g8JQgcNg8ScWjf8xoPz7/nfD8iFpoV0eQi86XQAWwUSiAIUiJGVhgEaUSAKiYXau0kKoKOjwVRthd8PmExIBRvmWH95INCQIIyYqVYAJKGghO/5Dg4B3wtxaPD9QAoS4IOM1gEzYBbAMkT16iIQGPxsopS5ScAcK23LiaBDpzyk1aGLHtsvhVrL7adDD55016wPXnDfcr7T3lcE2TVcP2fNhZM7WeiEhVp44vx9C5vVD6+eEgaLTZvEot3HL1lawlnXLK3XnISDllbWwmrmGjlRLdxq2bpme1RAeqXtzWh6g0F//wCCnRiN2diwr2+Yse3iEs20g05Q5tT0BikOXwKf79vsoEvb6p6xjVhHP92nwDJmX+9hwsf26dXbPiNvZ/98x67/+5T+ev0aWxbXCwOX41zLxia+O73B6Y57fN1u6GvN+Zmbc8XITigTAcB0Rl6X8QB4hDgEpoXypZz2q37D5FVnVa9t1n/dUgHw8uKMq9BmWqjoJoP3zevM+zG8jmVKE5hKpRShw9WTFZW04D7TscAC+B0RcOD9FHLnzqkg0HFOQMMMb5DoBKGKGgUGLEkCIzq5YEEkpastcWQyDYQyByJYBkBgx2nQsOEaSOx4girqOzDgwj8wYickWNAiHLe0JESMsiicTLaQh84PBm6WKlst/TD9hXQV25wWBLQP4jJw435MXD58RynxFDPKT30golBxluAtOI3iOMOcs5Bc2fFF8sPd2OFVBO24WQJ9CmEIG4HwQAb4ARmFS0aK8qoL/cLnXyA0FTE23FBSZf+AYEqCzpF4YojrgN5J004lt/LKFD7RHDAVQYEMh8lIQErAICImJgOZWD0ohHARdhg5wJdzSKxVaXhX6c7y8uQN1wAWmLOU0IQUShiQo0fZTceadqaMdP2uXwEAAAAA') format('woff2');}
	
	.icon {
		font-family:"HMfont-home" !important;
		font-size:36upx;
		font-style:normal;
		color:#000000;
		&.jia {
			&:before{content:"\e641";}
		}
		&.jian {
			&:before{content:"\e643";}
		}
		&.shanchu {
			&:before{content:"\e6a4";}
		}
	}
	view{
		line-height: 1.4;
	}
	.checkbox-box{
		display: flex;
		align-items: center;
		[class*="cuIcon-"]{
			font-size: 36upx;
		}
		.text{
			font-size: 28upx;
			margin-left: 10upx;
		}
	}
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height);//覆盖样式
		/*  #endif  */
	}

	.header{
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		.title{
			font-size: 36upx;
		}
		
	}
	.place{
		
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	.goods-list{
		width: 100%;
		padding: 20upx 0 120upx 0;
		.tis{
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
		}
		.row-g{
			width: calc(92%);
			margin: 20upx auto;
			border-radius: 15upx;
			box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
		}
		.row{
			width: calc(100%);
			height: calc(22vw + 40upx); 
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 4;
			border: 0;
			.menu{
				.icon{
					color: #fff;
					// font-size: 25upx;
				}
				position: absolute;
				width: 20%;
				height: 100%;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: red;
				color: #fff;
				z-index: 2;
			}
			.carrier{
				@keyframes showMenu {
					0% {transform: translateX(0);}100% {transform: translateX(-20%);}
				}
				@keyframes closeMenu {
					0% {transform: translateX(-20%);}100% {transform: translateX(0);}
				}
				&.open{
					animation: showMenu 0.25s linear both;
				}
				&.close{
					animation: closeMenu 0.15s linear both;
				}
				background-color: #fff;
				.checkbox-box{
					padding-left: 20upx;
					flex-shrink: 0;
					height: 22vw;
					margin-right: 20upx;
				}
				position: absolute;
				width: 100%;
				padding: 0 0;
				height: 100%;
				z-index: 3;
				display: flex;
				align-items: center;

				.goods-info{
					width: 100%;
					display: flex;
					padding-right: 20upx;
					.img{
						width: 22vw;
						height: 22vw;
						border-radius: 10upx;
						overflow: hidden;
						flex-shrink: 0;
						margin-right: 10upx;
						image{
							width: 22vw;
							height: 22vw;
						}
					}
					.info{
						width: 100%;
						height: 22vw;
						overflow: hidden;
						display: flex;
						flex-wrap: wrap;
						position: relative;
						.title{
							width: 100%;
							font-size: 28upx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						.spec{
							font-size: 24upx;
							background-color: #f3f3f3;
							color: #a7a7a7;
							display: flex;
							align-items: center;
							padding: 0 10upx;
							border-radius: 15upx;
							margin-bottom: 20vw;
							line-height: 2;
						}
						.spec-text{
							color: #a7a7a7;
							font-size: 24upx;
							display: flex;
							align-items: center;
							margin-bottom: 5vw;
							line-height: 2;
						}
						.price-number{
							position: absolute;
							width: 100%;
							bottom: 0upx;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							font-size: 28upx;
							height: 60upx;
							.price{
								color:var(--red);
							}
							.number{
								display: flex;
								justify-content: center;
								align-items: flex-end;
								.input{
									width: 60upx;
									height: 60upx;
									margin: 0 10upx;
									background-color: #f3f3f3;
									input{
										width: 60upx;
										height: 60upx;
										display: flex;
										justify-content: center;
										align-items: center;
										text-align: center;
										font-size: 26upx;
									}
								}
								.sub ,.add{
									width: 45upx;
									height: 45upx;
									background-color: #f3f3f3;
									border-radius: 5upx;
									.icon{
										font-size: 22upx;
										width: 45upx;
										height: 45upx;
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.footer{
		width: 92%;
		padding: 0 4%;
		background-color: #fbfbfb;
		height: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 0upx;
		z-index: 5;
		box-sizing: content-box;
		.delBtn{
			border: solid 1upx #f06c7a;
			color: #f06c7a;
			padding: 0 30upx;
			height: 50upx;
			border-radius: 30upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.settlement{
			width: 60%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.sum{
				width: 50%;
				font-size: 28upx;
				margin-right: 10upx;
				display: flex;
				justify-content: flex-end;
				.money{
					font-weight: 600;
				}
			}
			.btn{
				padding: 0 30upx;
				height: 50upx;
				background-color: #f06c7a;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30upx;
			}
		}
	}
	.empty{
		position:fixed;
		left: 0;
		top:0;
		width: 100%;
		height: 100vh;
		padding-bottom:100upx;
		display:flex;
		justify-content: center;
		flex-direction: column;
		align-items:center;
		image{
			width: 240upx;
			height: 160upx;
			margin-bottom:30upx;
		}
		.empty-tips{
			display:flex;
			font-size: 26upx;
			color: #C0C4CC;
			.navigator{
				color: #fa436a;
				margin-left: 16upx;
			}
		}
	}
</style>

